<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,button,span{
            color: blue;
        }

        .honey{
            font-size: 20px;
        }
/* 组合选择器 */
        /* .honey.ice表示同时选中2个class。其中.honey.ice之间无空格 */
        .honey.ice{
            color: red;
        }

        button.honey#se{
            color: aqua;
        }

        .honey.ice[name="cloud"]{
            padding: 20px;
        }

/* 后代选择器 */
        /* div下面的所有span都生效 */
        div span{
            color: blueviolet;
        }

        /* div低一级的span生效 */
        div>span{
            font-size: 20px;
        }

        /* .next的下一个span */
        .next + span{
            color: orange;
        }
/* 通用选择器。寻找下面所有元素 */
        .next~span{
            font-size: 3rem;
        }
/* 伪元素 */
        /* 激活状态 */
        a:active{
            color: green
            ;
        }
        /* 聚焦状态 */
        #test:focus{
            border: 5px solid black;
        }
    </style>
</head>
<body>
    <p class="honey">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum hic suscipit qui possimus dolores 
        eius quibusdam ex expedita nam, consequatur cum vitae sed quasi officia. 
        Dolorum autem porro totam blanditiis.</p>
    <p class="honey ice">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum hic suscipit qui possimus dolores 
        eius quibusdam ex expedita nam, consequatur cum vitae sed quasi officia. 
        Dolorum autem porro totam blanditiis.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum hic suscipit qui possimus dolores 
        eius quibusdam ex expedita nam, consequatur cum vitae sed quasi officia. 
        Dolorum autem porro totam blanditiis.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum hic suscipit qui possimus dolores 
        eius quibusdam ex expedita nam, consequatur cum vitae sed quasi officia. 
        Dolorum autem porro totam blanditiis.</p>
    <button class="honey ice" id="se">button</button>
    <input class="honey ice" id="test" name="cloud" type="text">
    <input class="honey ice" name="merge" type="text">
    <input class="honey ice" name="merge" type="text">
    <button>button</button>
    <button>button</button>
    <button class="next">button</button>
    <span>button</span>
    <span>button</span>
    <span>button</span>
    <div>
        <p><span>slot</span>
            <span>slot</span>
            <span>slot</span>
            <span>slot</span></p>
        <span>slot</span>
        <span>slot</span>
        <span>slot</span>
        <span>slot</span>
    </div>
    <a href="https://www.baidu.com/">百度</a>
</body>
</html>
